<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>设置新密码</title>

    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../css/common.css" rel="stylesheet"/>
    <link href="../../css/login/index.css" rel="stylesheet"/>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/vue.min.js"></script>
    <script src="../../js/fastclick.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/api.js"></script>
    <script src="../../js/HttpService.js"></script>
    <style>
        .send-sms{
            position: absolute;
            top:1rem;
            right: 20px;
            height:2rem;
            width: 6rem;
            line-height:2rem;
            font-size: 1.07rem;
            border-radius: 2rem;
            padding: 0 5px;
            border: 1px solid #88D57E
        }
        .left-padding{
            padding-left: 5rem!important;
        }
        .right-padding{
            padding-right: 8rem!important;
        }

    </style>
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
</head>
<body>
<div id="app">
    <div class="content-box">
        <img class="nav-icon-back" @click="navBack" src="../../img/common/btn_back.png" alt="">
        <div class="top-content">
            <div class="header">设置新密码</div>
            <div class="input_box">
                <div class="input_outer">
                    <input class="left-padding" v-model="form.password" :type="passwordText1" placeholder="请输入新密码">
                    <div class="label_left">
                        <img class="input_icon" src="../../img/login/ic_password.png">
                    </div>
                    <div class="label_right" @touchstart="showPassword('1')">
                        <img v-if="passwordMod1" class="right_icon"
                             src="../../img/login/ic_invisible.png">
                        <img v-else="passwordMod" class="right_icon"
                             src="../../img/login/btn_visible.png">
                    </div>
                </div>
                <div class="input_outer">
                    <input class="left-padding"  v-model="form.passwordRe" :type="passwordText2"
                            placeholder="请再次输入新密码">
                    <div class="label_left">
                        <img class="input_icon" src="../../img/login/ic_password.png">
                    </div>
                    <div class="label_right" @touchstart="showPassword('2')">
                        <img v-if="passwordMod2" class="right_icon"
                             src="../../img/login/ic_invisible.png">
                        <img v-else="passwordMod" class="right_icon"
                             src="../../img/login/btn_visible.png">
                    </div>
                </div>
            </div>
            <div @click="doSubmit" class="xl-btn">提交</div>
        </div>
        <img class="bg-img" src="../../img/login/bg_login_screen.png" alt="">
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            title: '登录',
            passwordMod1: true,
            passwordMod2: true,
            inputType: 'password',
            form: {
                passwordRe: '',
                password: '',
            }
        },
        computed: {
            passwordText1: function () {
                return this.passwordMod1 ? 'password':'text';
            },
            passwordText2: function () {
                return this.passwordMod2 ? 'password':'text';
            }
        },
        methods: {
            navBack:function(){
                mui.back();
            },
            // 提交
            doSubmit: function () {
                if(!this.form.password){
                    return mui.toast("请填写密码")
                }
                if(!this.form.passwordRe){
                    return mui.toast("请填写确认密码")
                }
                if(this.form.password != this.form.passwordRe ){
                    return mui.toast("两次填写不一致")
                }
                // 用户ID
                var id = getItem(RESET_PWD_USER_ID);
                var params = {
                    id: id,
                    password: this.form.password
                };
                $Service.user.updateAccountPWD(params, function (data) {
                    setTimeout(function () {
                        var page1 = plus.webview.getWebviewById('pages/login/passwordFind.html');
                        var page2 = plus.webview.getWebviewById('pages/login/resetPWD.html');
                        plus.webview.close(page1,'none',0);
                        plus.webview.close(page2,'none',0);
                    },10);
                    redirect("pages/login/login.html")
                })
            },
            // 显示密码
            showPassword: function (index) {
                this['passwordMod'+index] = !this['passwordMod'+index];
            },
        }
    });
</script>
</body>
</html>
